<template>
    <div class="servers-view">
        <h2>服务器管理</h2>
        <div class="server-list">
            <div v-for="server in servers" :key="server.id" class="server-item">
                <div class="server-header">
                    <span class="server-name">{{ server.name }}</span>
                    <span class="server-status" :class="server.status">{{ server.status }}</span>
                </div>
                <div class="server-details">
                    <p><strong>IP 地址:</strong> {{ server.ipAddress }}</p>
                    <p><strong>操作系统:</strong> {{ server.os }}</p>
                    <p><strong>CPU 使用率:</strong> {{ server.cpuUsage }}%</p>
                    <p><strong>内存使用率:</strong> {{ server.memoryUsage }}%</p>
                </div>
                <div class="server-actions">
                    <button class="view-btn">查看</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const servers = ref([
    {
        id: 1,
        name: '服务器1',
        ipAddress: '192.168.1.1',
        os: 'Ubuntu 20.04',
        cpuUsage: 10,
        memoryUsage: 20,
        status: '在线'
    },
    {
        id: 2,
        name: '服务器2',
        ipAddress: '192.168.1.2',
        os: 'CentOS 7',
        cpuUsage: 5,
        memoryUsage: 15,
        status: '离线'
    }
    // 更多服务器...
]);
</script>

<style scoped>
.servers-view {
    padding: var(--padding-base);
    background-color: var(--background-color);
}

.server-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.server-item {
    background-color: #f9fafb;
    border: 1px solid #ebebeb;
    border-radius: var(--border-radius);
    padding: 1rem;
    transition: box-shadow 0.3s ease;
}

.server-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.server-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.server-name {
    font-weight: bold;
}

.server-status {
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
}

.server-status.在线 {
    color: #67c23a;
    background-color: #f0f9eb;
}

.server-status.离线 {
    color: #f56c6c;
    background-color: #fef0f0;
}

.server-details {
    margin-bottom: 1rem;
}

.server-actions {
    display: flex;
    gap: 0.5rem;
}

.view-btn,
.edit-btn,
.delete-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.view-btn:hover {
    background-color: darken(var(--primary-color), 10%);
}

.edit-btn {
    background-color: #67c23a;
}

.edit-btn:hover {
    background-color: darken(#67c23a, 10%);
}

.delete-btn {
    background-color: #f56c6c;
}

.delete-btn:hover {
    background-color: darken(#f56c6c, 10%);
}
</style>